<template>
    <div>
        <div class="user-container">
            <el-card class="user-profile" shadow="hover" :body-style="{ padding: '0px' }">
                <div class="user-profile-bg"></div>
                <div class="user-avatar-wrap">
                    <el-avatar class="user-avatar" :size="120" :src="avatarImg" />
                </div>
                <div class="user-info">
                    <div class="info-name">{{ name }}</div>
                    <div class="info-desc">
                        <span>@lin-xin</span>
                        <el-divider direction="vertical" />
                        <el-link href="" target="_blank">lin-xin.gitee.io</el-link>
                    </div>
                    <div class="info-desc">FE Developer</div>
                    <div class="info-icon">
                        <a href="" target="_blank"> <i class="el-icon-lx-github-fill"></i></a>
                        <i class="el-icon-lx-qq-fill"></i>
                        <i class="el-icon-lx-facebook-fill"></i>
                        <i class="el-icon-lx-twitter-fill"></i>
                    </div>
                </div>
                <div class="user-footer">
                    <div class="user-footer-item">
                        <el-statistic title="Follower" :value="1800" />
                    </div>
                    <div class="user-footer-item">
                        <el-statistic title="Following" :value="666" />
                    </div>
                    <div class="user-footer-item">
                        <el-statistic title="Total Post" :value="888" />
                    </div>
                </div>
            </el-card>
            <el-card class="user-content" shadow="hover"
                :body-style="{ padding: '20px 50px', height: '100%', boxSizing: 'border-box' }">
                <el-tabs tab-position="left" v-model="activeName">
                    <el-tab-pane name="label1" label="个人信息" class="user-tabpane">
                        <img :src=viewData.row.imageUrl width="300px" />
                        <br />
                        <br />
                        <TableDetail :data="viewData"></TableDetail>
                        <br />
                        <el-button class="editButton" type="primary" size="small" :icon="Edit" @click="handleEdit">
                            编辑
                        </el-button>
                    </el-tab-pane>
                    <el-tab-pane name="label2" label="工作时间设定" class="user-tabpane">
                        <div class="demo-range">
                            <div class="example-basic">
                                <el-time-picker v-model="Data1" placeholder="Start time" />

                                <el-time-picker v-model="Data2" placeholder="End time" />
                            </div>
                            <br />
                            <br />
                            <el-input-number style="margin-left: 10px;" v-model="num" :min="1" :max="50" />
                            <br />
                            <br />
                            <el-button type="primary" @click="updateWorkTime" style="margin-left: 10px;">更新</el-button>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane name="label3" label="历史订单列表" class="user-tabpane">
                        <el-table :data="historyDiagnosticData" style="width: 100%"
                            :tree-props="{ children: 'children' }" row-key="id" border default-expand-all>
                            <el-table-column fixed prop="id" label="ID" width="50" />
                            <el-table-column prop="trouble" label="症状" width="120" />
                            <el-table-column prop="solution" label="诊断结果" width="120" />
                            <el-table-column prop="username" label="用户名" width="120" />
                            <el-table-column prop="doctorName" label="医生名" width="120" />
                            <el-table-column prop="drug" label="药物" width="120" />
                        </el-table>
                    </el-tab-pane>
                </el-tabs>
            </el-card>
        </div>
        <el-dialog v-model="visible" width="700px" destroy-on-close :close-on-click-modal="false" @close="closeDialog">
            <TableEdit :form-data="rowData" :options="options" :edit="true" :update="updateData" />
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import { reactive, ref, onMounted } from 'vue';
import TableDetail from '../components/table-detail.vue';
import 'vue-cropper/dist/index.css';
import avatar from '../assets/img/img.jpg';
import { Edit } from '@element-plus/icons-vue';
import { UserInfo } from '../types/user';
import axios from '../utils/request.ts'
import { ElMessage } from 'element-plus';
import { FormOption } from '../types/form-option';

const doctor_id = Number(localStorage.getItem('doctors_id'))

let options = ref<FormOption>({
    labelWidth: '100px',
    span: 12,
    list: [
        { type: 'input', label: '医生姓名', prop: 'name', required: true },
        { type: 'input', label: '医生所属医院ID', prop: 'clinicId', required: true },
        { type: 'input', label: '诊断室', prop: 'workRoom', required: true },
        { type: 'input', label: '医生学历', prop: 'degrees', required: true },
        { type: 'input', label: '医生图片', prop: 'imageUrl', required: true },
        { type: 'input', label: '医生介绍', prop: 'detail', required: true },
    ]
})

const num = ref(1)

const Data1 = ref()
const Data2 = ref()

const rowData = ref({});

const visible = ref(false);

const handleEdit = (row: any) => {
    visible.value = true;
    rowData.value = viewData.value.row
};

const ReservationDetail = () => {

}

const drugs = ref([{}])
drugs.value = [
    {
        drug: 'sadasda',
    },
    {
        drug: 'gfsdsfsd',
    },
    {
        drug: 'bxmcnxyc',
    }
]

const historyDiagnosticData = ref([{}])
historyDiagnosticData.value = [
    {
        id: 1,
        trouble: 'heheheda',
        solution: 'shajkdhjak',
        username: 'hasjldhla',
        doctorName: 'dhksajkd',
        children: drugs.value,
    },
]

const viewData = ref({
    row: {},
    list: []
});

viewData.value.row = {
    id: 0,
    name: 'sda',
    clinicId: 'sadsda',
    workRoom: 'asdasdasd',
    degrees: 'asdasda',
    imageUrl: 'sadasda',
    detail: 'asdasdas',
}

const updateData = async (row: any) => {
    rowData.value = { ...row };
    try {
        const res = await axios.post('/doctor/update', {
            id: rowData.value.id,
            name: rowData.value.name,
            clinicId: rowData.value.clinicId,
            workRoom: rowData.value.workRoom,
            degrees: rowData.value.degrees,
            imageUrl: rowData.value.imageUrl,
            detail: rowData.value.detail,
        });
        const { message, data } = res.data;
        if (message === 'success') {
            return;
        } else {
            ElMessage.error("查询失败")
        }
    } catch (error) {
        console.error('Error in fetching data:', error);
    }
}
const updateWorkTime = async () => {
    try {

        const res = await axios.post('/doctor/setWorkTime', {
            doctorId: doctor_id,
            workStart: Data1.value,
            workEnd: Data2.value,
            workTimes: num.value,
        });
        const { message, data } = res.data;
        if (message === 'success') {
            return;
        } else {
            ElMessage.error("查询失败")
        }
    } catch (error) {
        console.error('Error in fetching data:', error);
    }
}

viewData.value.list = [
    {
        prop: 'id',
        label: '医生ID',
    },
    {
        prop: 'name',
        label: '医生姓名',
    },
    {
        prop: 'clinicId',
        label: '医生所属医院ID',
    },
    {
        prop: 'workRoom',
        label: '诊断室',
    },
    {
        prop: 'degrees',
        label: '医生学历',
    },
    {
        prop: 'imageUrl',
        label: '医生图片',
    },
    {
        prop: 'detail',
        label: '医生介绍',
    },
]

const name = localStorage.getItem('vuems_name');

const activeName = ref('label1');

const avatarImg = ref(avatar);

onMounted(() => {
    GetDoctorInfo()
    GetDoctorDiagnostic(Number(doctor_id))
})

const GetDoctorInfo = async () => {
    try {
        const res = await axios.get('/doctor/show?doctorId=' + doctor_id);
        const { message, data } = res.data;
        if (message === 'success') {
            viewData.value.row.id = data.id;
            viewData.value.row.name = data.name;
            viewData.value.row.clinicId = data.clinicId;
            viewData.value.row.workRoom = data.workRoom;
            viewData.value.row.degrees = data.degrees;
            viewData.value.row.imageUrl = data.imageUrl;
            viewData.value.row.detail = data.detail;
            console.log('All data fetched successfully');
            return;
        } else {
            ElMessage.error("查询失败")
        }
    } catch (error) {
        console.error('Error in fetching data:', error);
    }
}

const GetDoctorDiagnostic = async (id: Number) => {
    try {
        const res = await axios.get('/diagnostic/doctorHistory?id=' + id);
        const { message, data } = res.data;
        if (message === 'success') {
            historyDiagnosticData.value.length = 0;
            for (let i = 0; i < data.length; i++) {
                drugs.value = [{}]
                drugs.value.length = 0;
                for (let j = 0; j < data[i].drugTerms.length; j++) {
                    drugs.value.push({
                        drug: data[i].drugTerms[j].name,
                    })
                }
                historyDiagnosticData.value.push({
                    id: data[i].diagnostic.id,
                    trouble: data[i].diagnostic.trouble,
                    username: data[i].username,
                    solution: data[i].diagnostic.solution,
                    doctorName: data[i].doctorName,
                    children: drugs.value,
                })
            }
            console.log('All data fetched successfully');
            return;
        } else {
            ElMessage.error("查询失败")
        }
    } catch (error) {
        console.error('Error in fetching data:', error);
    }
}

</script>

<style scoped>
.user-container {
    display: flex;
}

.user-profile {
    position: relative;
}

.user-profile-bg {
    width: 100%;
    height: 200px;
    background-image: url('../assets/img/ucenter-bg.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.user-profile {
    width: 500px;
    margin-right: 20px;
    flex: 0 0 auto;
    align-self: flex-start;
}

.user-avatar-wrap {
    position: absolute;
    top: 135px;
    width: 100%;
    text-align: center;
}

.user-avatar {
    border: 5px solid #fff;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 7px 12px 0 rgba(62, 57, 107, 0.16);
}

.user-info {
    text-align: center;
    padding: 80px 0 30px;
}

.info-name {
    margin: 0 0 20px;
    font-size: 22px;
    font-weight: 500;
    color: #373a3c;
}

.info-desc {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 5px;
}

.info-desc,
.info-desc a {
    font-size: 18px;
    color: #55595c;
}

.info-icon {
    margin-top: 10px;
}

.info-icon i {
    font-size: 30px;
    margin: 0 10px;
    color: #343434;
}

.user-content {
    flex: 1;
}

.user-tabpane {
    padding: 10px 20px;
}

.crop-wrap {
    width: 600px;
    height: 350px;
    margin-bottom: 20px;
}

.crop-demo-btn {
    position: relative;
}

.crop-input {
    position: absolute;
    width: 100px;
    height: 40px;
    left: 0;
    top: 0;
    opacity: 0;
    cursor: pointer;
}

.w500 {
    width: 500px;
}

.user-footer {
    display: flex;
    border-top: 1px solid rgba(83, 70, 134, 0.1);
}

.user-footer-item {
    padding: 20px 0;
    width: 33.3333333333%;
    text-align: center;
}

.user-footer>div+div {
    border-left: 1px solid rgba(83, 70, 134, 0.1);
}

.demo-range .el-date-editor {
    margin: 8px;
}

.demo-range .el-range-separator {
    box-sizing: content-box;
}
</style>

<style>
.el-tabs.el-tabs--left {
    height: 100%;
}

.example-basic .el-date-editor {
    margin: 8px;
}
</style>
